<template>
  <div class="recharge-pop" v-if="showRecharge">
    <div class="content-box">
      <div class="content">
          <div class="title">充娃娃币</div>
          <div class="list-box">
            <div class="recharge-list">
              <div class="recharge-item flex" v-for="(item,index) in list" :key="index">
                <div class="recharge-sum flex">
                  <div class="clearfix">
                    <p class="sum">{{item.coin}}<span>金币</span></p>
                  </div>
                </div>
                <span class="reward" v-if="+item.coin_award>0">(赠送{{item.coin_award}}金币)</span>
                <div class="buy-btn">
                  <div @click="startPay(item.id)" class="sum">￥{{item.money}}</div>
                  <img src="../assets/images/buy-btn.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cancel-btn" @touchstart="hide($event)"></div>
      </div>
  </div>
</template>
<script type="text/ecmascript-6">
import api from "@/assets/js/api";
import { Toast } from "mint-ui";
import { systemConfig } from "@/assets/js/utils";
import Wx from "@/assets/js/weixin";
export default {
  data() {
    return {
      list: [],
      interval: "",
      coins: 0,
      fake_pay: "" //手否模拟支付
    };
  },
  props: ["showRecharge", "sourceClass"],
  created: function() {
    this.getlistCoin();
    this.getfs();
  },
  watch: {
    showRecharge (val) {
      if (val) {
        this.setEvent(true);
      } else {
        this.setEvent(false);
      }
    }
  },
  methods: {
    getfs() {
      systemConfig(config => {
        this.config = config;
        this.qcloud = config.qcloud; //腾讯云相关配置
        this.fake_pay = config.fake_pay; //模拟支付
      });
    },
    setEvent (key) {
      if (key) {
        document.querySelector('.'+this.sourceClass).style.overflow = 'hidden';
        document.querySelector('.'+this.sourceClass).style.height = '100%';
      } else {
        document.querySelector('.'+this.sourceClass).style.overflow = 'initial';
        document.querySelector('.'+this.sourceClass).style.height = 'auto';
      }
    },
    startPay(id) {
      if (this.isPay) return;
      this.isPay = true;
      this.createOrderSn(id);
    },
    createOrderSn(id) {
      if (this.config.fake_pay == true) { //模拟支付
        api.fetch('/api/payments/fake-pay', {method: 'POST', data: {'coin_id': id}}).then((res) => { //充值列表
          api.fetch('/api/payments/' + res.data.id).then((resreset) => {
            Toast("支付成功");
            this.isPay = false;
            this.$emit("success");
          }).catch();
        }).catch();
      } else {
        api.fetch('/api/payments', {
          method: "POST",
          data: {
            coin_id: id
          }
        }).then(res => {
          this.getPayConfig(res.data.id);
        }).catch((err) => {
          let msg = err.response.data.message;
          Toast(msg);
          this.isPay = false;
        });
      }
    },
    getPayConfig(id) {
      api.fetch("/api/payments/" + id + "/prepay-params")
        .then(res => {
          let data = res.data;
          data.success = () => {
            this.isPay = false;
            this.$emit("success");
          };
          data.cancel = () => {
            this.isPay = false;
          };
          data.fail = () => {
            this.isPay = false;
          };
          Wx.pay(data);
        }).catch(err => {
        Toast({
          message: err.response.data.message,
          iconClass: "mint-toast-icon mintui mintui-field-warning"
        });
        this.isPay = false;
      });
    },
    getlistCoin() {
      api.fetch("/api/coins").then(res => {
        this.list = res.data;
      });
    },
    hide(e) {
      e.stopPropagation();
      this.$emit("cancel");
    }
  }
};
</script>
<style lang="less">
.recharge-pop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  .content-box {
    width: 6.3rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .content {
    width: 6.3rem;
    background: #ffb52b;
    border-radius: 0.2rem;
    padding: 0 0.3rem 0.3rem;
    .title {
      height: 1.06rem;
      line-height: 1.06rem;
      font-size: 0.3rem;
      color: #fff;
      text-align: center;
    }
    .list-box {
      max-height: 7.8rem;
      overflow: scroll;
      border-radius: 0.2rem;
    }
    .recharge-list {
      background-color: #fff;
      border-radius: 0.2rem;
      padding: 0 0.3rem;
      .recharge-item {
        height: 1.74rem;
        border-bottom: 0.1px solid #e1e4eb;
        align-items: center;
        justify-content: space-between;
        position: relative;
        &:last-of-type {
          border: none;
        }
        .reward {
          position: absolute;
          font-size: 0.24rem;
          color: #09bb07;
          left: 1rem;
          top: 1.08rem;
        }
        .recharge-sum {
          color: #000;
          font-size: 0.2rem;
          .sum {
            font-size: 0.4rem;
            color: #ffb52b;
            span {
              font-size: 0.28rem;
            }
            .plus {
              font-size: 0.2rem;
            }
          }
          &:before {
            content: "";
            background: url(../assets/images/coin-icon.png) no-repeat;
            width: 0.75rem;
            height: 0.75rem;
            margin-right: 0.2rem;
            background-size: contain;
          }
        }
        .buy-btn {
          width: 1.76rem;
          height: 0.72rem;
          font-size: 0.36rem;
          color: #fff;
          text-align: center;
          position: relative;
          .sum {
            position: absolute;
            line-height: 0.72rem;
            text-align: center;
            width: 100%;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .cancel-btn {
    width: 6.3rem;
    background: url("../assets/images/close-btn.png") no-repeat center top;
    background-size: contain;
    height: 1.75rem;
    line-height: 0.88rem;
    font-size: 0.28rem;
    color: #555;
    text-align: center;
  }
}
</style>
